<template>
  <v-dialog id="dialog" v-model="launch_dialog" persistent max-width="600px" overlay-color="black">
    <v-dialog id="message" v-model="message_dialog" max-width="290" persistent>
      <v-card>
        <v-card-title class="headline">{{message}}</v-card-title>

        <v-card-text>{{message_inner}}</v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            v-if="!launched"
            color="primary"
            text
            @click="message_dialog=false,loading=false"
          >重试</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="code_dialog" persistent max-width="600">
      <v-card>
        <v-toolbar dark color="primary">
          <v-btn icon dark @click="code_dialog=false,loading=false">
            <v-icon>mdi-close</v-icon>
          </v-btn>
          <v-toolbar-title>{{$t("message.twofactorcode")}}</v-toolbar-title>
        </v-toolbar>
        <v-container>
          <div style="text-align:center;">
            <div height="500px" flat>
              <br />
              <br />
              <p class="display-2">您已开启两步验证</p>
              <br />
              <br />
              <v-icon size="200">mdi-shield-key</v-icon>
              <br />
              <br />
              <br />
              <p class="subtitle-1">请输入您设备上的验证码</p>
              <v-row>
                <v-col cols="12">
                  <v-text-field
                    rounded
                    prepend-icon="mdi-cellphone-key"
                    v-model="tfcode"
                    counter="6"
                    label="两步验证码"
                    required
                    color="primary"
                    outlined
                  ></v-text-field>
                </v-col>
              </v-row>
              <br />
              <v-btn color="primary" fab x-large @click="Check_code">
                <v-icon>mdi-check</v-icon>
              </v-btn>
              <br />
              <v-btn
                color="primary"
                text
                x-large
                @click="code_dialog=false,loading=false,tfcode=''"
              >取消</v-btn>
              <br />
              <br />
            </div>
          </div>
        </v-container>
      </v-card>
    </v-dialog>
    <v-card>
      <v-form ref="form" v-model="valid" :lazy-validation="lazy">
        <v-card-title>
          <span class="headline">用户登录</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12">
                <v-text-field
                  rounded
                  prepend-icon="mdi-account"
                  v-model="LoginUsername"
                  :rules="nameRules"
                  label="ID/邮箱"
                  color="primary"
                  required
                  outlined
                ></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-text-field
                  rounded
                  prepend-icon="mdi-key"
                  v-model="LoginPasswd"
                  :rules="passwdRules"
                  label="密码"
                  color="primary"
                  type="password"
                  required
                  outlined
                ></v-text-field>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-btn color="red darken-1" text @click="CloseLaunchdialog()">关闭</v-btn>
          <div class="flex-grow-1"></div>

          <v-btn text @click="CloseLaunchdialog(),OpenRegistdialog()">新用户注册</v-btn>
          <v-btn color="primary" raised :loading="loading" :disabled="!valid" @click="Login">登录</v-btn>
        </v-card-actions>
      </v-form>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data: () => ({
    tfcode: "",
    code_dialog: false,
    loading: false,
    launched: false,
    message_inner: "账户或密码错误",
    message: ":( 失败",
    message_dialog: false,
    name: "Launchdialog",
    nameRules: [
      v => !!v || "必需项",
      v => (v && v.length <= 40) || "用户名不多于40位"
    ],
    //Passwd:'',
    passwdRules: [
      v => !!v || "必需项",
      v => (v && v.length <= 18) || "不多于18位",
      v => (v && v.length >= 6) || "不少于6位"
    ],
    valid: true,
    userid:'',
  }),
  methods: {
    CloseLaunchdialog() {
      this.$store.commit("close_launch_dialog");
      this.$refs.form.reset();
    },
    OpenRegistdialog() {
      this.$store.commit("open_regist_dialog");
    },
    Login() {
      this.loading = true;

      var loginBean = new URLSearchParams();
      loginBean.append("loginBean.uidOrEmail", this.LoginUsername); //你要传给后台的参数值 key/value
      loginBean.append("loginBean.passwd", this.LoginPasswd);
      this.$axios({
        method: "post",
        url: "http://47.100.137.177:8080/YimooBP1.0/mylogin",
        data: loginBean
      })
        .then(response => {
          if (response.data != null) {
            
            var uid=JSON.parse(response.data);
            var loginBean1 = new URLSearchParams();
            loginBean1.append(
              "fetchUserBean.uid",
              String(uid)
            ); //你要传给后台的参数值 key/value
            this.$axios({
              method: "post",
              url: "http://47.100.137.177:8080/YimooBP1.0/myfetchuser",
              data: loginBean1
            })
              .then(response => {
                var userinfo = JSON.parse(response.data);
                console.log(userinfo.tfkey);
                if (userinfo.tfkey == null) {
                  this.message_dialog = true;
                  this.message = ":)成功";
                  this.message_inner = "登录成功";
                  this.launched = true;
                  this.loading = false;
                  var userid = JSON.parse(response.data);
                  console.log(userid)
                  this.$cookies.set("user", userid.uid, Infinity);
                  location.reload();
                } else {
                  this.code_dialog=true;
                  this.userid=userinfo.uid;
                }
              })
              .catch(function(error) {
                console.log(error);
              });
          } else {
            this.message_dialog = true;
            this.message = ":(错误";
            this.message_inner = "账户或密码错误";
            this.launched = false;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    Check_code(){
                  console.log(this.userid)
                  var loginBean2 = new URLSearchParams();
                  loginBean2.append(
                    "uid",
                    this.userid
                  ); 
                  loginBean2.append(
                    "key",
                    this.tfcode
                  ); 
                  //你要传给后台的参数值 key/value
                  this.$axios({
                    method: "post",
                    url: "http://47.100.137.177:8080/YimooBP1.0/mytwofactor",
                    data: loginBean2
                  })
                    .then(response => {
                      if(response.data=="success"){
                      this.message_dialog = true;
                  this.message = ":)成功";
                  this.message_inner = "登录成功";
                  this.launched = true;
                  this.loading = false;
                  this.$cookies.set("user", this.userid, Infinity);
                  location.reload();
                      }else{
                        this.message_dialog = true;
            this.message = ":(错误";
            this.message_inner = "验证码错误";
            this.launched = false;
                      }
                    })
                    .catch(function(error) {
                      console.log(error);
                    });
    }
  },
  computed: {
    launch_dialog: {
      get: function() {
        return this.$store.state.launch_dialog;
      }
    }
  },
  props: []
};
</script>

<style>
.v-dialog {
  background-image: url(../img/background.jpg);
  background-blend-mode: multiply;
  background-repeat: round;
}

.v-dialog::before {
  content: attr(data-text);
}
#dialog {
  z-index: 1000;
}
#message {
  z-index: 1001;
}
</style>
